@import '@scss/hairline.scss';

.root {
  position: relative;
  z-index: 1;
  height: 100%;

  :global {
    // ---
    .tabs {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .tabs-wrap {
      position: relative;
      z-index: 1;
      height: 44px;
      overflow: hidden;
      padding-right: 86px;
      box-shadow: 0 2px 2px #f0f0f0;
    }
    .tabs-nav {
      position: relative;
      display: flex;
      height: 100%;
      overflow-x: auto;
      padding: 0 8px;
      box-sizing: content-box;

      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }

      .tab {
        position: relative;
        flex: 1 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        font-size: 15px;
        color: #9ea1ae;
        // line-height: 44px;

        &.active {
          font-size: 18px;
          color: #333;
          font-weight: 500;
        }
      }

      .tab-line {
        // 38px 是动态计算的
        // transform: translateX(38px) translateX(-50%);
        transform: translateX(23px);
        transition-duration: 0.3s;
        background-color: #fc6627;
        width: 30px;
        height: 3px;

        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        border-radius: 3px;
      }
    }

    .tabs-content {
      flex: 1;
      padding-bottom: 50px;
      overflow: hidden;

      .tab-pane {
        height: 100%;
      }
    }
  }
}
